<template>
    <view class="liaison-box">
        <view class="liaison-item" v-for="item in liaison" :key="item.id">
            <view class="item-left">
                <u-radio-group class="radio" v-model="value" @change="radioGroupChange(item)">
	                <u-radio :name="item.id"></u-radio>
                </u-radio-group>
            </view>
            <view class="item-center">
                <view class="center-tag">
                    <text class="t1 t2" v-if="item.isDefault ==1">默认</text>
                    <text class="tages" v-for="(list,dictValue) in drugRelationList" :key="dictValue">
                        <text class="t1" v-if="item.drugRelation == list.dictValue">{{list.dictName}}</text>
                    </text>
                </view>
                <view class="center-address">
                    <!-- 上海市黄浦区龙华东路385号8楼 -->
                </view>
                <view class="center-info">
                    <text class="t1">{{item.name}}</text>
                    <text class="t2">{{item.telPhone}}</text>
                </view>
            </view>
            <view class="item-right" @click="goEdit(item)">
                <img src="@/static/images/edit.png" alt="">
            </view>
        </view>
        
    </view>
</template>

<script>
import { mapActions,mapState } from 'vuex';

export default {
	props:{
		liaison:{
			type:Array,
			// default:()=>{}
		}
	},
	data() {
		return {
            value:'',
            isShow:false,
		}
	},
	onReady() {
      this.init()
	},
    watch:{
        liaison (newLiaison){
            console.log("newLiaison",newLiaison)
             const selectDefault = newLiaison.find(item=>{
                 console.log("item",item)
                return (item.isDefault === 1)
            })
            this.value = selectDefault.id
        }
    },
    computed:{
      ...mapState({
				drugRelationList: state => state.shop.drugRelationList
			}),
    },
	methods: {
		  ...mapActions(['ActGetAppDictList']),

        goEdit(item){
			this.$u.route({
				url:'/pages/person/editLiaison',
				params:{
					telPhone:item.telPhone,
					drugRelation:item.drugRelation,
					name:item.name,
                    id:item.id,
                    isDefault:item.isDefault
                    
				}
            })
        },
        radioGroupChange(e) {
            this.liaison.forEach(element => {
                element.value = ''
            });
            e.value = e.id
        },
        async init(){
            await this.ActGetAppDictList({
                dictType:'drug_relation',isCtr:'0'
            })
      },
	}
};
</script>

<style lang="scss" scoped>
.liaison-box{
.liaison-item{
    display: flex;
    border-bottom: 2rpx solid #f6f6f6;
    background-color: #fff;
    .item-left{ 
        margin: auto 0 auto 24rpx;
    }
    .item-center{
        flex: 1;
        .center-tag{
            padding-top: 22rpx;
            .t1{
                background-color: $u-type-primary;
                color: #fff;
                font-size: 22rpx;
                padding: 4rpx 8rpx;
                border-radius: 4rpx;
            }
            .t2{
                background-color: $u-type-error;
                margin-right: 16rpx;
            }
        }
        .center-address{
            padding-top: 10rpx;
        }
        .center-info{
            padding: 16rpx 0 24rpx 0;

            .t2{
                margin-left: 84rpx;
            }
        }
    }
    .item-right{
        margin: auto 24rpx;
        img{
            display: block;
            width: 48rpx;
            height: 48rpx;
        }
    }
}
}
</style>